<template>
    <div id="display">
        <ul>
            <li style="list-style:none;padding-top:1rem;" v-for='(item,index) in products' :key="index">
            <img :src='item.img' :title="item.name">
            </li>
        </ul>
        <div v-for="(item,index) in products" :item='item' :key='index'>
            <router-link :to="{
                name:'detail',
                params:{
                    id:item.id,
                    name:item.name,
                    price:item.price
                }
            }">
            </router-link>

        </div>
    </div>
</template>

<script>
export default {
  name: "app",
    data:function(){
    return {
      products:[
        {name:'太平鸟男女装专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/23/198/ias_6a4fc2fd6736f36f4980382dc7e27f83_1135x545_85.jpg',price:'1000'},
        {name:'卡宾Cabbeen男装专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/22/154/ias_a781e207876ba28ea1c1988acee73ba1_1135x545_85.jpg',price:'2000'},
        {name:'诗凡黎SEIFINI女装专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/03/26/152/ias_c1291a5a78aceaeffe392b420797ed80_1135x545_85.jpg',price:'3000'}
      ]
    }
  },
  components: {},
}
</script>

<style>
    #display {
        background-color: #f9f9fa;
    }
    img {
        width: 900px;
        margin: 10px 50px ;
    }
</style>